<template>
    <div class="fxn-detail-info">
        <div class="info-title">
            <div class="title">财务信息</div>
            <div class="btn" v-if="authMenu('sys_case_detail_finance_add')">
                <el-button type="primary" plain icon="Plus" @click="handleOp">添加</el-button>
            </div>
        </div>
        <div class="info-wrap">
            <el-table v-loading="loading" :data="financeData">
                <el-table-column label="应收款名称" prop="title" />
                <el-table-column label="款项类型" prop="type">
                    <template #default="scope">
                        {{$filter.formatData(scope.row.type, 'payment_type')}}
                    </template>
                </el-table-column>
                <el-table-column label="应收金额" prop="money" />
                <el-table-column label="预计收款时间" prop="coll_time">
                    <template #default="scope">
                        {{$filter.dateTime(scope.row.coll_time,1)}}
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" />
                <el-table-column label="已收款金额" prop="coll_money" />
                <el-table-column label="到账状态" prop="coll_status">
                    <template #default="scope">
                        <span :style="{color: $filter.collStatusColor(scope.row.coll_status)}">{{$filter.collStatus(scope.row.coll_status)}}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="开票状态" prop="" /> -->
            </el-table>
        </div>

        <!-- 添加 -->
        <dialogForm ref="dialogAdd" :formData="addData" @handleDialog="handleSubmit"></dialogForm>
        <!-- 添加 End -->
    </div>
</template>

<script>
    import dialogForm from '../../Common/Form.vue'
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        components: {dialogForm},
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                loading: false,
                financeData: [],

                //添加
                addData: {
                    inline: false,
                    width: '800',
                    title: '添加应收款',
                    labelWidth: '120',
                    data: [
                        {formType: 'input', span: 12, label: '应收款名称', prop: 'title', rules: [{ required: true, message: '请输入应收款名称', trigger: 'blur' }], placeholder: '请输入应收款名称'},
                        {formType: 'select', span: 12, label: '款项类型', prop: 'type', data: computed(() => store.state.configEnable.payment_type), rules: [{ required: true, message: '请选择款项类型', trigger: 'blur' }], selectlabel: 'value', selectvalue: 'name', placeholder: '请选择'},
                        {formType: 'input', span: 12, label: '应收金额', prop: 'money', rules: [{ required: true, message: '请输入应收款名称', trigger: 'blur' }], placeholder: '请输入应收金额'},
                        {formType: 'datepicker', span: 12, label: '收款时间', prop: 'coll_time', type: 'date', format: 'YYYY-MM-DD', rules: [{ required: true, message: '请选择收款时间', trigger: 'blur' }], placeholder: '请选择'},
                        {formType: 'input', span: 24, type: 'textarea', rows: 5, label: '备注', prop: 'remark', placeholder: '请输入备注'},
                    ]
                },
            })

            //获取财务信息
            const getFinance = () => {
                state.loading = true;
                proxy.$http.get('/oa/Lawcase/financeInfo',{
                    id: router.currentRoute.value.query.id,
                })
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.financeData = data.finance;
                    }
                })
            }

            //添加
            const handleOp = () => {
                proxy.$refs.dialogAdd.openDialog();
            }

            //提交添加
            const handleSubmit = (e) => {
                e.lawcase_id = router.currentRoute.value.query.id;
                proxy.$http.post('/oa/Lawcase/financeForm', e)
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        proxy.$msg.success('提交成功');
                        window.location.reload();
                    }
                })
            }

            //获取权限
            const authMenu = (value) => {
                let currentRouter = router.currentRoute.value.path;
                let menuArr = (proxy.$public.authMenu(currentRouter).split(','));
                for (let index = 0; index < menuArr.length; index++) {
                    if(value == menuArr[index]){
                        return true
                    }
                }
            }
            
            //Dom加载
            onMounted(()=>{
                authMenu();
                getFinance();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getFinance,
                handleOp,
                handleSubmit,
                
                //组件方法
                authMenu,
            }

        },
    })
</script>

<style scoped>
    .fxn-detail-info{
        margin-top: 20px;
    }

    .fxn-detail-info .info-title{
        margin: 20px 0;
        overflow: hidden;
    }

    .fxn-detail-info .info-title .title{
        float: left;
        color: rgba(46, 60, 179, .9);
        font-weight: bold;
        text-indent: 12px;
        position: relative;
    }

    .fxn-detail-info .info-title .title::after{
        content: '';
        position: absolute;
        left: 0;
        top: 11px;
        width: 4px;
        height: 10px;
        background: rgba(46, 60, 179, .9);
    }

    .fxn-detail-info .info-title .btn{
        float: right;
    }

    .fxn-detail-info .info-wrap{
        overflow: hidden;
    }
</style>